<template>
  <!-- 占位 防止底部列表被覆盖 -->
  <view class="nav_list_block"></view>
  <view class="nav_list">
    <view class="nav_item flex_c" :class="{ 'active': currentIndex == index }"
    :style="{ width: `${100 / navList.length}%` }" v-for="(item, index) in navList" :key="index"
    @click="changeNav(index)">{{ item.text }}</view>
  </view>
</template>

<script lang="ts" setup>
defineProps<{
  navList: NavItem[],
  currentIndex: number
}>()
const emit = defineEmits(["changeNav"])
interface NavItem {
  text: string
  index: number
}
const changeNav = ((i: number) => {
  emit("changeNav", i)
})
</script>

<style lang="scss" scoped>
.nav_list_block{
  width: 100%;
  height: 94rpx;
}
.nav_list {
  width: 100%;
  height: 94rpx;
  display: flex;
  background-color: #fff;
  font-size: 30rpx;
  color: #222222;
  position: fixed;
  top: 0;
}

.nav_item {
  height: 94rpx;
  position: relative;
}

.active {
  font-weight: 600;

  &::after {
    content: "";
    position: absolute;
    width: 52rpx;
    height: 8rpx;
    background: #FE6E04;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    bottom: 12rpx;
  }
}
</style>